<template>
  <div class="app-container">
    <div class="common-block-wrapper">
      <div class="common-block-top">
        <span>我的试验</span>
      </div>
      <ul class="common-block-bottom">
        <li
          class="common-block-bottom-item"
          v-for="item in experimentList"
          :key="item.label"
          @click.stop="linkTo(item)"
        >
          <div class="bottom-item-left">
            <div class="item-left-title">
              {{ item.label }}
            </div>
            <div class="item-left-count">{{ item.count }}<span>项</span></div>
          </div>
          <div class="bottom-item-right" :class="item.icoClass"></div>
        </li>
      </ul>
    </div>
    <div class="home-second-wrapper">
      <div class="common-block-wrapper one-split-wrapper">
        <div class="common-block-top">
          <span>受控端服务器管理</span>
        </div>
        <ul class="common-block-bottom">
          <li
            class="common-block-other-item"
            v-for="item in serverList"
            :key="item.label"
            @click.stop="linkTo(item)"
          >
            <div class="bottom-item-title">
              {{ item.label }}
            </div>
            <div class="bottom-item-content">
              <div class="item-content-left">
                {{ item.count }}
                <template v-if="item.label == '连接申请'">
                  <span>项</span>
                </template>
              </div>
              <div class="item-content-right" :class="item.icoClass"></div>
            </div>
          </li>
        </ul>
      </div>
      <div class="common-block-wrapper one-split-wrapper">
        <div class="common-block-top">
          <span>云平台管理</span>
          <div
            v-if="yunAllList.length > 2"
            @click="linkTo({ url: '/cloud/cloud/docker-list' })"
          >
            更多
          </div>
        </div>
        <ul class="common-block-bottom">
          <template v-if="yunList.length > 0">
            <li
              class="common-block-other-item"
              v-for="item in yunList"
              :key="item.label"
              @click.stop="linkTo(item)"
            >
              <div class="bottom-item-title">
                {{ item.label }}
              </div>
              <div class="bottom-item-content">
                <div class="item-content-left">
                  {{ item.count }}
                </div>
                <div class="item-content-right" :class="item.icoClass"></div>
              </div>
            </li>
          </template>
          <template v-else>
            <el-empty
              description="暂无数据"
              style="width: 100%"
              image-size="100"
            ></el-empty>
          </template>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getCount } from "@/api/plugin/workflow/process";
import { getDockerCount } from "@/views/cloud-platform/api/system/assets-docker";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.5.0",
      experimentList: [
        {
          label: "待办事项",
          count: "10",
          icoClass: "backlog-bg",
          url: "/process/todo",
        },
        {
          label: "已处理事项",
          count: "10",
          icoClass: "dealwith-bg",
          url: "/process/my-done",
        },
        {
          label: "我发起的",
          count: "10",
          icoClass: "launch-bg",
          url: "/process/my-done",
        },
        {
          label: "发起试验",
          count: "10",
          icoClass: "experiment-bg",
          url: "/process/start",
        },
      ],
      serverList: [
        {
          label: "连接申请",
          count: "10",
          icoClass: "connect-bg",
          url: "/resource/severApply",
        },
        {
          label: "已管理受控端（在线数/总数）",
          count: "10",
          icoClass: "controlled-bg",
          url: "/resource/severMange",
        },
      ],
      yunList: [
        // {
        //   label: "docker服务器11（在线数/总数）",
        //   count: "10",
        //   icoClass: "docker-bg",
        //   url: "/cloud/cloud/docker-list",
        // },
      ],
      yunAllList: [],
    };
  },
  mounted() {
    // 获取我的试验数据
    getCount().then((res) => {
      console.log("请求数的数据", res);
      if (res.code == 200) {
        this.experimentList.find((item) => item.label == "已处理事项").count =
          res.data.myDoneNum;
        this.experimentList.find((item) => item.label == "我发起的").count =
          res.data.sendNum;
        this.experimentList.find((item) => item.label == "待办事项").count =
          res.data.todoNum;
        this.experimentList.find((item) => item.label == "发起试验").count =
          res.data.processNum;

        this.serverList.find((item) => item.label == "连接申请").count =
          res.data.applyNum;
        this.serverList.find(
          (item) => item.label.indexOf("已管理受控端") !== -1
        ).count = `${res.data.skOnlineNum}/${res.data.skTotalNum}`;
      }
    });
    getDockerCount().then((res) => {
      console.log("docker res", res);
      if (res.code == 200) {
        let arr = Object.keys(res.data);
        arr = arr.map((item) => {
          return {
            label: `docker服务器${item}数量（在线数/总数）`,
            count: `${res.data[item].isRunning}/${res.data[item].total}`,
            icoClass: "docker-bg",
            url: "/cloud/cloud/docker-list",
          };
        });
        this.yunAllList = arr;
        if (arr.length > 2) {
          this.yunList = arr.slice(0, 2);
        } else {
          this.yunList = arr;
        }
      } else {
      }
    });
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    // 跳转
    linkTo(item) {
      this.$router.push(item.url);
    },
  },
};
</script>

<style scoped lang="scss">
.common-block-wrapper {
  box-sizing: border-box;
  border: 1px solid #e5e5e5;

  .common-block-top {
    padding: 14px 30px;
    border-bottom: 1px solid #e7e7e7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      position: relative;
      padding-left: 12px;
      font-size: 18px;
      color: #333333;
      line-height: 20px;
      &::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 98%;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        background: #1486f6;
      }
    }
    div {
      color: #1486f6;
      cursor: pointer;
    }
  }
  .common-block-bottom {
    margin-bottom: 0;
    padding: 40px 45px 20px 45px;
    min-width: 440px;
    display: flex;
    flex-wrap: wrap;
    &::after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    li {
      list-style: none;
    }
    .common-block-bottom-item {
      overflow: hidden;
      background: #f0f8ff;
      border-radius: 5px;
      padding: 36px 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-content: flex-start;
      width: 350px;
      margin-right: 15px;
      margin-bottom: 20px;
      cursor: pointer;
      &:hover {
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);
      }
      .bottom-item-left {
        margin-right: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #333333;
        .item-left-title {
          width: 90px;
          font-size: 18px;
          font-weight: 500;
          margin-bottom: 20px;
        }
        .item-left-count {
          font-size: 30px;
          font-weight: 600;
          span {
            font-size: 16px;
            margin-left: 10px;
            color: #777;
          }
        }
      }
      .bottom-item-right {
        width: 60px;
        height: 60px;
        background-size: 100% 100%;
      }
      .backlog-bg {
        background-image: url("../assets/images/backlog-bg.png");
      }
      .dealwith-bg {
        background-image: url("../assets/images/dealwith-bg.png");
      }
      .launch-bg {
        background-image: url("../assets/images/launch-bg.png");
      }
      .experiment-bg {
        background-image: url("../assets/images/experiment-bg.png");
      }
    }
    .common-block-other-item {
      float: left;
      background: #f0f8ff;
      border-radius: 5px;
      padding: 36px 40px;
      min-width: 350px;
      margin-right: 15px;
      margin-bottom: 20px;
      color: #333;
      cursor: pointer;
      &:hover {
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);
      }
      .bottom-item-title {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 20px;
      }
      .bottom-item-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item-content-left {
          font-size: 30px;
          font-weight: 600;
          span {
            font-size: 16px;
            margin-left: 10px;
            color: #777;
          }
        }
        .item-content-right {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }
        .connect-bg {
          background-image: url("../assets/images/connect-bg.png");
        }
        .controlled-bg {
          background-image: url("../assets/images/controlled-bg.png");
        }
        .docker-bg {
          background-image: url("../assets/images/docker-bg.png");
        }
      }
    }
  }
}
.home-second-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .one-split-wrapper {
    flex: 1;
    overflow: auto;
    min-width: 520px;
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
